<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/style.css"/>
    <script type="text/javascript" src="../../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>


    <style type="text/css">
        body {
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form action="index.html" id="userForm" method="post" class="definewidth m20">
    <input type="hidden" name="uId" value=""/>
    <input type="hidden" name="oRid" value=""/>
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">登录名</td>
            <td id="uLoginName">admin</td>
        </tr>
        <tr>
            <td class="tableleft">密码</td>
            <td><input type="password" name="uPassWord"/></td>
        </tr>
        <tr>
            <td class="tableleft">真实姓名</td>
            <td><input type="text" name="uTrueName" value="admin"/></td>
        </tr>
        <tr>
            <td class="tableleft">邮箱</td>
            <td><input type="text" name="uEmail" value="qq@qq.com"/></td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" name="uState" value="0" checked/> 启用
                <input type="radio" name="uState" value="1"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">角色</td>
            <td>
                <select name="rId">
                </select>
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button onclick="addUser()" class="btn btn-primary" type="button">更新</button>&nbsp;&nbsp;<button
                    type="button"
                    class="btn btn-success"
                    name="backid"
                    id="backid">
                返回列表
            </button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(function () {
        $('#backid').click(function () {
            window.location.href = "index.html";
        });
        loadRole();
        loadUser();
    });

    String.prototype.GetValue = function (para) {
        let reg = new RegExp("(^|&)" + para + "=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?") + 1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    // 获取用户信息
    function loadUser() {
        let url = document.location.toString();
        let uId = url.GetValue("uId");
        $.ajax({
            url: `/user/${uId}`,
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    let userDto = res.obj;
                    console.log(userDto)
                    $("input[name='uId']").val(userDto.uId);
                    $("td[id='uLoginName']").html(userDto.uLoginName)
                    $("input[name='uPassWord']").val(userDto.uPassWord);
                    $("input[name='uTrueName']").val(userDto.uTrueName);
                    $("input[name='uEmail']").val(userDto.uEmail);
                    if (userDto.uState == 0) {
                        $("input[name='uState']").get(0).checked = true;
                    } else if (userDto.uState == 1) {
                        $("input[name='uState']").get(1).checked = true;
                    }
                    $("input[name='oRid']").val(userDto.role.rId);
                }
            }
        })

    }

    // 新增用户
    function addUser() {
        // 不使用表单方式提交请求
        event.preventDefault();
        let user = $("#userForm").serialize();
        $.ajax({
            type: "POST",
            url: "/user/save",
            dataType: "json",
            data: user,
            success: function (res) {
                alert(res.msg);
                if (res.code === 200) {
                    // 跳转至查询页
                    $(location).attr("href", "index.html");
                }
            }
        });
    }

    // 获取系统角色
    function loadRole() {
        $.ajax({
            type: "GET",
            url: "/role/list",
            dataType: "json",
            data: {
                pageNum: 1,
                pageSize: 100
            },
            success: function (res) {
                if (res.code === 200) {
                    // 渲染角色信息至下拉框
                    let $select = $("select[name='rId']");
                    $select.empty();
                    // <option value="">--请选择--
                    // <option value="1">管理员-->
                    let list = res.pageInfo.list;
                    // console.log(list)
                    let str = "<option value=\"\">--请选择--</option>";
                    let rId = $("input[name='oRid']");
                    for (let i = 0; i < list.length; i++) {
                        // console.log(t.rState)
                        // console.log(list[i])
                        if (list[i].rState === 0) {
                            if (list[i].rId == rId) {
                                str += `<option selected value=\"${list[i].rId}\">${list[i].rName}</option>`;
                            } else {
                                str += `<option value=\"${list[i].rId}\">${list[i].rName}</option>`;
                            }
                        }
                    }
                    $select.append(str);
                }
            }
        })
    }
</script>